<template>
    <div>
        <div @click="openEdit">
            <header_moban_1 :title="row.title"></header_moban_1>

            <div class="resume_content_main f-14">
                <div
                    :style="{
                        width: width + 'px',
                        height: height + 'px',
                    }"
                    v-loading="isLoading"
                >
                    <echartsPage
                        id="echartsBox"
                        :width="width"
                        :height="height"
                        :options="options"
                        v-if="!isLoading"
                    ></echartsPage>
                </div>
            </div>
        </div>
        <DialogForm
            v-if="visable"
            v-model="visable"
            title="编辑"
            auto
            :formConfig="formConfig"
            :formData="formData"
            :rules="rules"
            @confirm="confirm"
        >
            <template slot="list">
                <div class="d-main flex-wrap p-b-20 p-t-10 m-t-10">
                    上级模块：<el-button type="primary" v-if="!formData.list.length" @click="add1"
                        >+add</el-button
                    >
                </div>
                <div
                    :class="['flex-wrap', index === 0 ? '' : 'm-t-20']"
                    v-for="(item, index) in formData.list"
                    :key="index"
                >
                    <el-input class="w-300" v-model="item.label" :maxlength="100"></el-input
                    >：<el-input v-model="item.value" :maxlength="200"></el-input>
                    <el-button class="m-l-20" type="primary" @click="add1(index)">+add</el-button>
                    <el-button class="m-l-10" type="danger" @click="del1(index)">+del</el-button>
                </div>
                <div class="line m-t-20"></div>
                <div class="flex-wrap m-t-20">
                    下级进度模块：<el-button
                        @click="add2"
                        type="primary"
                        v-if="!formData.progress_list.length"
                        >+add</el-button
                    >
                </div>
                <div
                    class="grid-list m-t-20"
                    v-for="(item, index) in formData.progress_list"
                    :key="index"
                >
                    <div class="flex-center-wrap">
                        <div class="flex-0">左侧文案：</div>
                        <el-input v-model="item.label" :maxlength="100"></el-input>
                    </div>
                    <div class="flex-center-wrap">
                        <div class="flex-0">进度：</div>
                        <el-input v-model="item.percentage" :maxlength="100"></el-input>
                    </div>
                    <div class="flex-center-wrap">
                        <div class="flex-0">右侧描述：</div>
                        <el-input v-model="item.text" :maxlength="100"></el-input>
                    </div>
                    <div class="flex-wrap">
                        <el-button class="m-l-20" type="primary" @click="add2(index)"
                            >+add</el-button
                        >
                        <el-button class="m-l-10" type="danger" @click="del2(index)"
                            >+del</el-button
                        >
                    </div>
                </div>
            </template>
        </DialogForm>
    </div>
</template>

<script>
const plugins = [
    {
        js: 'http://47.108.195.190:5000/netdist/echarts543min-1728272924292~1~.js',
        loading: true,
    },
]

export default {
    components: {
        header_moban_1: () => import('@/components/bn/headerPages/moban_1.vue'),
        echartsPage: () => import('@/components/echartsPage/index.vue'),
    },
    props: {
        row: {
            type: Object,
            default() {
                return {}
            },
        },
        isEdit: {
            type: Boolean,
            default: false,
        },
    },

    data() {
        return {
            isLoading: true,
            width: 700,
            height: 600,
            options: {},
            visable: false,
            formConfig: [
                {
                    label: '模块名',
                    type: 'input',
                    modelName: 'title',
                    className: 'w-300',
                },
                {
                    label: '内容区',
                    type: 'customInput',
                    slot: 'list',
                },
            ],
            formData: {
                list: [],
            },
            rules: {
                title: [{ required: true, message: '请输入模块名字', trigger: 'blur' }],
            },
        }
    },
    created() {
        if (this.row.is_need_default) {
            const defaultval = {
                title: '可视化',
            }
            for (const key in defaultval) {
                this.$set(this.row, key, defaultval[key])
            }
        }
    },
    mounted() {
        this.getIndexDBJS(plugins)
            .then(() => {
                this.init()
                this.$emit('loadSuccess', {
                    row_code: this.row.row_code,
                })
            })
            .catch((err) => {
                this.Toast(err)
            })
    },
    methods: {
        init() {
            this.isLoading = false

            var dateBase = new Date()
            var year = dateBase.getFullYear()
            var dottedBase = +dateBase + 1000 * 3600 * 24
            var weekCategory = []

            var radarData = []
            var radarDataAvg = []
            var maxData = 12000
            var weekMaxData = []
            var weekLineData = []

            // 周数据
            for (var i = 0; i < 7; i++) {
                // 日期
                var date = new Date((dottedBase -= 1000 * 3600 * 24))
                weekCategory.unshift([date.getMonth() + 1, date.getDate()].join('/'))

                // 折线图数据
                weekMaxData.push(maxData)
                var distance = Math.round(Math.random() * 11000 + 500)
                weekLineData.push(distance)

                // 雷达图数据
                // 我的指标
                var averageSpeed = +(Math.random() * 5 + 3).toFixed(3)
                var maxSpeed = averageSpeed + +(Math.random() * 3).toFixed(2)
                var hour = +(distance / 1000 / averageSpeed).toFixed(1)
                var radarDayData = [distance, averageSpeed, maxSpeed, hour]
                radarData.unshift(radarDayData)

                // 平均指标
                var distanceAvg = Math.round(Math.random() * 8000 + 4000)
                var averageSpeedAvg = +(Math.random() * 4 + 4).toFixed(3)
                var maxSpeedAvg = averageSpeedAvg + +(Math.random() * 2).toFixed(2)
                var hourAvg = +(distance / 1000 / averageSpeed).toFixed(1)
                var radarDayDataAvg = [distanceAvg, averageSpeedAvg, maxSpeedAvg, hourAvg]
                radarDataAvg.unshift(radarDayDataAvg)
            }

            // 颜色设置
            var color = {
                linearYtoG: {
                    type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 1,
                    y2: 1,
                    colorStops: [
                        {
                            offset: 0,
                            color: '#f5b44d',
                        },
                        {
                            offset: 1,
                            color: '#28f8de',
                        },
                    ],
                },
                linearGtoB: {
                    type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 1,
                    y2: 0,
                    colorStops: [
                        {
                            offset: 0,
                            color: '#43dfa2',
                        },
                        {
                            offset: 1,
                            color: '#28f8de',
                        },
                    ],
                },
                linearBtoG: {
                    type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 1,
                    y2: 0,
                    colorStops: [
                        {
                            offset: 0,
                            color: '#1c98e8',
                        },
                        {
                            offset: 1,
                            color: '#28f8de',
                        },
                    ],
                },
                areaBtoG: {
                    type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [
                        {
                            offset: 0,
                            color: 'rgba(35,184,210,.2)',
                        },
                        {
                            offset: 1,
                            color: 'rgba(35,184,210,0)',
                        },
                    ],
                },
            }

            this.options = {
                title: {
                    text: '一周跑步数据',
                    textStyle: {
                        color: '#fff',
                        fontSize: 32,
                        fontWeight: 'normal',
                    },
                    subtext: year + '/' + weekCategory[6],
                    subtextStyle: {
                        color: '#fff',
                        fontSize: 16,
                    },
                    top: 50,
                    left: 80,
                },
                legend: {
                    top: 220,
                    left: 80,
                    orient: 'vertical',
                    itemGap: 15,
                    itemWidth: 12,
                    itemHeight: 12,
                    data: ['平均指标', '我的指标'],
                    textStyle: {
                        color: '#fff',
                        fontSize: 14,
                    },
                },
                tooltip: {
                    trigger: 'item',
                },
                radar: {
                    center: ['68%', '27%'],
                    radius: '40%',
                    name: {
                        color: '#fff',
                    },
                    splitNumber: 8,
                    axisLine: {
                        lineStyle: {
                            color: color.linearYtoG,
                            opacity: 0.6,
                        },
                    },
                    splitLine: {
                        lineStyle: {
                            color: color.linearYtoG,
                            opacity: 0.6,
                        },
                    },
                    splitArea: {
                        areaStyle: {
                            color: '#fff',
                            opacity: 0.1,
                            shadowBlur: 25,
                            shadowColor: '#000',
                            shadowOffsetX: 0,
                            shadowOffsetY: 5,
                        },
                    },
                    indicator: [
                        {
                            name: '全程距离(m)',
                            max: maxData,
                        },
                        {
                            name: '平均速度(km/h)',
                            max: 10,
                        },
                        {
                            name: '最快速度(km/h)',
                            max: 12,
                        },
                        {
                            name: '总计时间(h)',
                            max: 3.5,
                        },
                    ],
                },
                grid: {
                    left: 90,
                    right: 80,
                    bottom: 40,
                    top: '60%',
                },
                xAxis: {
                    type: 'category',
                    position: 'bottom',
                    axisLine: true,
                    axisLabel: {
                        color: 'rgba(255,255,255,.8)',
                        fontSize: 12,
                    },
                    data: weekCategory,
                },
                yAxis: {
                    name: 'km/h',
                    nameLocation: 'end',
                    nameGap: 24,
                    nameTextStyle: {
                        color: 'rgba(255,255,255,.5)',
                        fontSize: 14,
                    },
                    max: maxData,
                    splitNumber: 4,

                    axisLine: {
                        lineStyle: {
                            opacity: 0,
                        },
                    },
                    splitLine: {
                        show: true,
                        lineStyle: {
                            color: '#fff',
                            opacity: 0.1,
                        },
                    },
                    axisLabel: {
                        color: 'rgba(255,255,255,.8)',
                        fontSize: 12,
                    },
                },
                series: [
                    {
                        name: '每日跑步指标分布与比较',
                        // animation:false
                        type: 'radar',
                        symbolSize: 0,
                        data: [
                            {
                                value: radarDataAvg[6],
                                name: '平均指标',
                                itemStyle: {
                                    normal: {
                                        color: '#f8d351',
                                    },
                                },
                                lineStyle: {
                                    normal: {
                                        opacity: 0,
                                    },
                                },
                                areaStyle: {
                                    normal: {
                                        color: '#f8d351',
                                        shadowBlur: 25,
                                        shadowColor: 'rgba(248,211,81,.3)',
                                        shadowOffsetX: 0,
                                        shadowOffsetY: -10,
                                        opacity: 1,
                                    },
                                },
                            },
                            {
                                value: radarData[6],
                                name: '我的指标',
                                itemStyle: {
                                    normal: {
                                        color: '#43dfa2',
                                    },
                                },
                                lineStyle: {
                                    normal: {
                                        opacity: 0,
                                    },
                                },
                                areaStyle: {
                                    normal: {
                                        color: color.linearGtoB,
                                        shadowBlur: 15,
                                        shadowColor: 'rgba(0,0,0,.2)',
                                        shadowOffsetX: 0,
                                        shadowOffsetY: 5,
                                        opacity: 0.8,
                                    },
                                },
                            },
                        ],
                    },
                    {
                        name: '每日跑步里程',
                        type: 'line',
                        smooth: true,
                        symbol: 'emptyCircle',
                        symbolSize: 8,
                        itemStyle: {
                            normal: {
                                color: '#fff',
                            },
                        },
                        lineStyle: {
                            normal: {
                                color: color.linearBtoG,
                                width: 3,
                            },
                        },
                        areaStyle: {
                            normal: {
                                color: color.areaBtoG,
                            },
                        },
                        data: weekLineData,
                        lineSmooth: true,
                        markLine: {
                            silent: true,
                            data: [
                                {
                                    type: 'average',
                                    name: '平均值',
                                },
                            ],
                            precision: 0,
                            label: {
                                normal: {
                                    formatter: '平均值: \n {c}',
                                },
                            },
                            lineStyle: {
                                normal: {
                                    color: 'rgba(248,211,81,.7)',
                                },
                            },
                        },
                        tooltip: {
                            position: 'top',
                            formatter: '{c} m',
                            backgroundColor: 'rgba(28,152,232,.2)',
                            padding: 6,
                        },
                    },
                    {
                        name: '占位背景',
                        type: 'bar',
                        itemStyle: {
                            normal: {
                                show: true,
                                color: '#000',
                                opacity: 0,
                            },
                        },
                        silent: true,
                        barWidth: '50%',
                        data: weekMaxData,
                        animation: false,
                    },
                    {
                        name: '占位背景',
                        type: 'bar',
                        itemStyle: {
                            normal: {
                                show: true,
                                color: '#000',
                                opacity: 0.1,
                            },
                        },
                        silent: true,
                        barWidth: '50%',
                        barGap: 0,
                        data: weekMaxData,
                        animation: false,
                    },
                ],
                backgroundColor: '#383546',
            }
        },
        openEdit() {
            if (!this.isDev()) {
                return this.$message.warning('暂未开放')
            }

            this.formData = this.deepCopy(this.row)
            this.visable = true
        },
        confirm() {
            this.$emit('update', {
                info: this.formData,
            })
            this.visable = false
        },
        editorChange({ str, html }) {
            Object.assign(this.formData, {
                str,
                html,
            })
        },
        add1(index) {
            const obj = {
                label: '',
                value: '',
            }
            if (Array.isArray(this.formData.list)) {
                index !== undefined
                    ? this.formData.list.splice(index + 1, 0, obj)
                    : this.formData.list.push(obj)
            } else {
                this.$set(this.formData, 'list', [obj])
            }
        },
        del1(index) {
            this.formData.list.splice(index, 1)
        },
        add2(index) {
            const obj = {
                label: '',
                percentage: '',
                text: '',
            }
            if (Array.isArray(this.formData.progress_list)) {
                index !== undefined
                    ? this.formData.progress_list.splice(index + 1, 0, obj)
                    : this.formData.progress_list.push(obj)
            } else {
                this.$set(this.formData, 'progress_list', [obj])
            }
        },
        del2(index) {
            this.formData.progress_list.splice(index, 1)
        },
        getText({ text, percentage }) {
            return text ? text : `${percentage}%`
        },
    },
}
</script>

<style lang="scss" scoped>
.grid-clumn-2 {
    flex: 1;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px 30px;
}
.resume_content_main {
    padding: 14px 20px;
}

.grid-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, 300px);
    gap: 10px;
}
.show-text ::v-deep {
    .el-progress__text {
        display: none;
    }
    .el-progress-bar {
        padding-right: 10px;
    }
}
.h-14 {
    height: 14px;
}
</style>
